<template>
  <div class="common-layout__message">
    <el-container>
      <el-aside width="120px">
        <el-col :span="24">
          <h5 class="mb-2">消息</h5>
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @select="handleOpen"
          >
            <el-menu-item index="1">
              <span>回复我的</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span>收到的赞</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <div v-if="nowTag === '1'">
          <div v-for="reply in replys.data">
            <div class="link" @click="toVideo(reply.videoId)">
              <div>
                <strong @click.stop="toHome(reply.comment.user.id)" class="link">{{
                    userName(reply.comment.user.name, reply.comment.user.id)
                  }}</strong>
                <i style="margin-left: 10px; font-size: 13px">回复了我</i>
              </div>
              <p style="margin-top: 5px" class="text-hidden__3">
                {{ reply.comment.content }}
              </p>
              <p class="text-hidden__1"
                 style="color:grey; font-size: 13px; border-left: 2px solid #b6b6b6; margin-top: 5px; padding-left: 10px">
                {{ reply.carrier }}
              </p>
              <div style="margin-top: 5px; color: grey">
                <i style="font-size: 12px">{{ dateConversion(reply.time) }}</i>
                <span class="link" @click.stop="showDialog(reply)" style="font-size: 13px; margin: 10px">回复</span>
              </div>
            </div>
            <el-divider/>
          </div>
        </div>
        <div v-show="nowTag === '2'">
          <div v-for="like in likes.data">
            <div @click="toVideo(like.videoId)">
              <div>
                <i style="font-size: 13px">
                共{{ like.likes.likeCount }}人点赞了我的
                {{ like.likes.type === 1 ? "视频" : "评论" }}
                </i>
                <i style="font-size: 12px; margin-left: 5px; color: grey">{{ dateConversion(like.likes.lastTime) }}</i>
              </div>
              <p class="text-hidden__1"
                 style="color:grey; font-size: 13px; border-left: 2px solid #b6b6b6; margin-top: 5px; padding-left: 10px">
                {{ like.carrier }}
              </p>
              <div>
              </div>
            </div>
            <el-divider/>
          </div>
        </div>
        <el-button
            type="primary"
            text
            @click="loadData"
            bg
            v-if="(nowTag == '1' && !replys.noMore) || (nowTag == '2' && !likes.noMore)"
        >加载更多
        </el-button>
        <span v-else style="color: grey">没有更多了</span>
      </el-main>
    </el-container>
  </div>

  <el-dialog
      v-model="replyDialog.isShow"
      :title="'回复' + replyDialog.data.userName"
      width="500px"
      align-center
      center
  >
    <el-input v-model="replyDialog.data.content" type="textarea"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="replyDialog.isShow = false">取消</el-button>
        <el-button @click="sendReply" type="primary">
          发送
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import messageApi from "@/api/message";
import commentApi from "@/api/comment";
import router from "@/router/router";
import store from "@/store/store";
import {dateConversion, numberConversion, successNotify, userName} from "@/utils/common.js";
import { Reply, LikesMsg } from '@/types/message'
import { Comment, CommentSave } from "@/types/comment"
import { Result } from '@/types/common'

interface msgObj<T> {
  data: Array<T>,
  nowIndex: number,
  noMore: boolean,
  load: boolean
}
const nowTag = ref<string>("1");
const replys = ref<msgObj<Reply>>({
  data: [],
  nowIndex: 1,
  noMore: false,
  load: false,
});
const likes = ref<msgObj<LikesMsg>>({
  data: [],
  nowIndex: 1,
  noMore: false,
  load: false,
});
const pageSize = ref<number>(10);
const replyDialog = ref<{isShow: boolean, data: CommentSave}>({
  isShow: false,
  data: {}
});

// 弹出对话框
const showDialog = (reply: Reply) => {
  replyDialog.value.isShow = true;
  console.log(reply);
  replyDialog.value.data = {
    parentId: reply.comment.id,
    content: "",
    videoId: reply.videoId,
    userName: userName(reply.comment.user.name, reply.comment.user.id),
  };
};

// 回复别人的评论
const sendReply = () => {
  commentApi.save(replyDialog.value.data).then((res) => {
    if (res.data.code === 0) {
      replyDialog.value.isShow = false;
      successNotify("发送成功");
    }
  });
};
const handleOpen = (key: string, keyPath: string[]) => {
  nowTag.value = key;
  console.log(nowTag, key);
  switch (key) {
    case "1":
      if (replys.value.nowIndex === 1)
        getNewReply();
      break;
    case "2":
      if (likes.value.nowIndex === 1)
        getNewLike();
      break;
    default:
  }
};

// 获取别人回复我的评论
const getNewReply = () => {
  if (!replys.value.load) {
    replys.value.load = true;
    messageApi.getReply(replys.value.nowIndex, pageSize.value).then((res) => {
      replys.value.load = false;
      if (res.data.code === 0) {
        if (res.data.data.length < pageSize.value) {
          replys.value.noMore = true;
        }
        replys.value.data.push(...res.data.data);
        replys.value.nowIndex += 1;
      }
    });
  }
};

const getNewLike = () => {
  if (!likes.value.load) {
    likes.value.load = true;
    messageApi.getLikes(likes.value.nowIndex, pageSize.value).then((res) => {
      likes.value.load = false;
      if (res.data.code === 0) {

        if (res.data.data.length < pageSize.value) {
          likes.value.noMore = true;
        }
        likes.value.data.push(...res.data.data);
        likes.value.nowIndex += 1;
      }
    });
  }
};

const loadData = () => {

  switch (nowTag.value) {
    case "1":
      getNewReply();
      break;
    case "2":
      getNewLike();
      break;
    default:
  }
};

const toVideo = (videoId: string) => {
  router.toVideo(videoId);
  setTimeout(() => {
    window.location.reload();
  }, 200);
};

const toHome = (userId: string) => {
  router.toHome(userId);
  setTimeout(() => {
    window.location.reload();
  }, 100);

};
</script>

<style scoped lang="scss">

.common-layout__message {
  .el-aside {
    padding-right: 10px;
    color: grey;
  }
}
</style>